<!--component html goes here -->
<div [@routerTransition]>
    <h1>商品分类</h1>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary pull-right btn-sm" (click)="createCategory()">
                <i class="fa fa-plus"></i>创建分类
            </button>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>类别名称</th>
                        <th>商品数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let category of categories.items; let i=index">
                        <td>{{i+1}}</td>
                        <td>{{category.name}}</td>
                        <td>{{category.productCount}}</td>
                        <td>
                            <button class="btn btn-default pull-right btn-sm" (click)="deleteCategory(category.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<createCategoryModal #createCategoryModal (modalSave)="getCategories()"></createCategoryModal>